<template>
	<view class="zone">
		<Header title=" " color="#fff"></Header>

		<view class="playbox" >
			<view class="content">
				<image class="yb" src="http://img.cpgm.cc/panda/static/mask/number.png" mode="widthFix" />
				<image class="guang" src="http://img.cpgm.cc/panda/static/mask/guang.png" mode="widthFix" />
				<view class="tab">
					<view v-for="(item,index) in tablist" :key="index" :class="[stat == item.id?'active':'']"
						@click="tabchange(item.id)">{{item.name}}</view>
				</view>
				<scroll-view scroll-y class="maskscroll">
					<view class="list">
						<view class="item" v-for="item in list[stat]" :key="item.id">
							<h3>{{item.num}}</h3>
							<p> <image src="http://img.cpgm.cc/panda/static/self/sj.png" mode="widthFix" /> 价值： {{item.price}}水晶</p>
							<view class="button" @click="exchange(item)">兑换</view>
						</view>
					</view>		
				</scroll-view>
			</view>
		</view>


		<u-mask :show="show">
			<view class="warp">
				<view class="maskbox">
					<view class="topimg">
						<image src="http://img.cpgm.cc/panda/static/self/shuj.png" mode="widthFix" />
					</view>
					<view class="content">
						<h3>确认使用{{result.price}}水晶兑换 <br>“{{result.num}}”靓号吗？</h3>

						<view class="button" @click="$u.toast('即将上线')">确定开通</view>
					</view>
					<p class="cancel2" @click="show = false">取消</p>
				</view>
			</view>
		</u-mask>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				tablist: [
					{
						id: 1,
						name: '3位豹子靓号'
					},
					{
						id: 2,
						name: '4位豹子靓号'
					},
					{
						id: 3,
						name: '顺子靓号'
					},
					{
						id: 4,
						name: '普通4位靓号'
					},
				],
				stat:1,
				list:{
					1:[
						{
							id:1,
							num:666,
							price:5000
						},
						{
							id:2,
							num:888,
							price:8888
						},
						{
							id:3,
							num:111,
							price:3000
						},
						{
							id:4,
							num:222,
							price:3000
						},
						{
							id:5,
							num:333,
							price:3000
						},
						{
							id:6,
							num:444,
							price:3000
						},
						{
							id:7,
							num:555,
							price:3000
						},
						{
							id:8,
							num:777,
							price:3000
						},
						{
							id:9,
							num:999,
							price:3000
						},
					],
					2:[
						{
							id:1,
							num:6666,
							price:3000
						},
						{
							id:2,
							num:8888,
							price:5000
						},
						{
							id:3,
							num:1111,
							price:1000
						},
						{
							id:4,
							num:2222,
							price:1000
						},
						{
							id:5,
							num:3333,
							price:1000
						},
						{
							id:6,
							num:4444,
							price:1000
						},
						{
							id:7,
							num:5555,
							price:1000
						},
						{
							id:8,
							num:7777,
							price:1000
						},
						{
							id:9,
							num:9999,
							price:1000
						},
					],
					3:[
						{
							id:1,
							num:12345,
							price:1000
						},
						{
							id:2,
							num:23456,
							price:500
						},
						{
							id:3,
							num:34567,
							price:500
						},
						{
							id:4,
							num:45678,
							price:500
						},
						{
							id:5,
							num:56789,
							price:500
						},
						{
							id:6,
							num:67890,
							price:500
						},
						{
							id:7,
							num:98765,
							price:500
						},
						{
							id:8,
							num:54321,
							price:1000
						},
					],
					4:[
						{
							id:1,
							num:1000,
							price:200
						},
						{
							id:2,
							num:1001,
							price:200
						},
						{
							id:3,
							num:1002,
							price:200
						},
						{
							id:4,
							num:1003,
							price:200
						},
						{
							id:5,
							num:1004,
							price:200
						},
						{
							id:6,
							num:1005,
							price:200
						},
						{
							id:7,
							num:1006,
							price:200
						},
						{
							id:8,
							num:1007,
							price:200
						},
					]
				},
				result:'',
			};
		},
		methods: {
			tabchange(id) {
				this.stat = id
			},

			exchange(item) {
				this.result = item
				this.show = true
			}
		},
	}
</script>

<style lang="less">

.zone {
	min-height: 100vh;
	background: #000000;
	padding: 5vh 0 0;
}

// tab导航
.tab {
	width: 100%;
	display: flex;
	align-items: center;
	overflow: hidden;
	margin: 10px auto;

	view {
		width: 50%;
		height: 42px;
		text-align: center;
		line-height: 42px;
		color: rgba(37, 37, 37, 0.71);
		font-size: 13px;
		font-weight: 600;
		border-radius: 7px;
	}
}

.active {
	color: #FFFFFF !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 19px;
	background: #338F88;
}

.item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 10px;
	margin: 10px 0;
	background: linear-gradient(180deg, #61FBED 0%, #E4FDFC 31%, #F6FEEB 68%, #F5FEA8 100%);
    box-shadow: inset 0px 2px 0px 0px rgba(255, 255, 255, 0.5);
    border-radius: 9px;
	border: 1px solid #348F88;

	h3 {
		color: #000000;
		font-size: 20px;
		font-weight: 600;
	}

	p {
		color: rgba(19, 19, 20, 0.71);
		font-size: 14px;
		font-weight: 600;
		margin: 10px 0;
		display: flex;
		align-items: center;

		image {
			width: 30px;
		}
	}

	.button {
		width: 75px;
		height: 40px;
		color: #B73800;
		font-size: 14px;
		font-weight: 600;
		background: url('http://img.cpgm.cc/panda/static/public/btn7.png');
		background-size: 100% 100%;
	}
}


// 购买弹窗

.playbox {
	width: 100%;
	position: relative;
	left: 0%;
	background: url('http://img.cpgm.cc/panda/static/mask/beij.png');
	background-size: 100% 100%;
	z-index: 2;

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30px 15px 15px;

		.yb {
			width: 40%;
			margin-top: -50px;
			z-index: 5;
		}

		.guang {
			width: 100%;
			position: absolute;
			top: -15%;
			left:0;
			z-index: -1;
		}

		.maskscroll {
			height: calc(90vh - 112px);
		}
	}
}


.maskbox {
	background: linear-gradient(180deg, #61FBED 0%, #E4FDFC 31%, #F6FEEB 68%, #F5FEA8 100%);
	box-shadow: inset 5px 5px 45px 0px rgba(255,255,255,0.5), inset -5px -5px 45px 0px rgba(255,255,255,0.5), inset 0px 2px 0px 0px rgba(255,255,255,0.5);
	padding: 20px;
	border-radius: 15px;

	.topimg {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: -18%;

		image {
			width: 65px;
		}
	}

	.content {
		background: rgba(255,255,255,0.7);
		padding: 15px 10px;
		border-radius: 9px;
		margin-top: 20px;

		h3 {
			position: relative;
			color: #000000;
			font-size: 18px;
			text-align: center;
			z-index: 1;
		}

		h3::after {
			content: '';
			width: 100%;
			height: 30px;
			background: url('http://img.cpgm.cc/panda/static/mask/banner.png');
			background-size: 50% auto;
			background-position: center;
			background-repeat: no-repeat;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.button {
			width: 70%;
			height: 53px;
			background: url('http://img.cpgm.cc/panda/static/public/btn3.png');
			background-size: 100% 100%;
			margin: 0 auto;
			margin-top: 20px;
			color: #B73800;
			font-weight: 600;
			font-size: 20px;
		}
	}

	.cancel2 {
		color: rgba(0, 0, 0, 0.5);
		text-align: center;
		margin-top: 15px;
	}

}


</style>
